<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>个人排班日程和预约</span>
        <el-button class="button" type="primary" @click="btnAddDialog">
          添加</el-button
        >
      </div>
    </template>
    
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="ws_date" label="上班日期" width="100" />
      <el-table-column prop="time1" label="上午时间" width="100" />
      <el-table-column label="是否被预约" width="100">
        <!-- 使用 v-slot 创建自定义插槽 -->
        <template v-slot="{ row }">
          {{ row.state1 === 1 ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="time2" label="下午时间" width="150" />
      <el-table-column label="是否被预约" width="100">
        <template v-slot="{ row }">
          {{ row.state2 === 1 ? "是" : "否" }}
        </template>
      </el-table-column>

      <el-table-column prop="time3" label="晚上时间" width="150" />
      <el-table-column label="是否被预约" width="100">
        <template v-slot="{ row }">
          {{ row.state3 === 1 ? "是" : "否" }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="">
        <template #default="scope">
            <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="Are you sure to delete this?"
            @confirm="deleteClick(scope.row.ws_id)"
          >
            <template #reference>
              <el-button link type="warning" size="small">删除</el-button>
            </template>
          </el-popconfirm>
       
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页 -->
    <el-pagination
      :currentPage="currentPage"
      :page-size="pageSize"
      :page-sizes="[5, 10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <!-- 详情对话框 -->
  <el-dialog v-model="detailDialogVisible" title="查看文章内容" width="60%">
    <el-descriptions :column="4" border title="User Info">
      <el-descriptions-item label="文章名">{{
        article.a_uid
      }}</el-descriptions-item>
      <el-descriptions-item label="文章内容">{{
        article.a_context
      }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
  <!-- 添加对话框 -->
  <el-dialog v-model="dialogFormVisible" title="添加用户信息">
    <el-form :model="form">
      <el-form-item label="上班日期" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.ws_date"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="上午时间" label-width="100">
        <el-input v-model="form.time1" autocomplete="off" :readonly="true" />
      </el-form-item>
      <el-form-item label="下午时间" label-width="100">
        <el-input v-model="form.time2" autocomplete="off" :readonly="true" />
      </el-form-item>
      <el-form-item label="晚上时间" label-width="100">
        <el-input v-model="form.time3" autocomplete="off" :readonly="true" />
      </el-form-item>
      <el-form-item label="上午状态" :label-width="formLabelWidth">
        <el-radio v-model="form.state1" label="1">是</el-radio>
        <el-radio v-model="form.state1" label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="下午状态" :label-width="formLabelWidth">
        <el-radio v-model="form.state2" label="1">是</el-radio>
        <el-radio v-model="form.state2" label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="晚上状态" :label-width="formLabelWidth">
        <el-radio v-model="form.state3" label="1">是</el-radio>
        <el-radio v-model="form.state3" label="0">否</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addworktime()"> 添加 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  <script>
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},
      frmQuery: {
        as_uid: "",
      }, //
      formLabelWidth: "140px",
      form: {
        time1: "9:00-12:00",
        time2: "14:00-16:00",
        time3: "17:00-19:00",
      },
      dialogFormVisible: false, //添加对话框
      detailDialogVisible: false, //详情对话框
      updateDialogVisible: false, //修改对话框
      tableData: [],
      class: {},
      pcId: "",
    };
  },
  mounted() {
    this.pcId = window.localStorage.getItem("pc_uid");
    console.log(this.pcId);
    this.loadpcworkData(this.pcId);
  },
  methods: {
    //加载咨询师个人排班
    loadpcworkData(pcId) {
      this.$http
        .get("http://localhost:8080/workschedule/selectpcwork/" + pcId)
        .then((res) => {
          this.tableData = res.data;
          console.log(this.tableData);
        })
        .catch((err) => {});
    },
    deleteClick(ws_id) {
      // 删除操作
      console.log(ws_id);
      this.$http
        .get("http://localhost:8080/workschedule/deletepcwork/" + ws_id)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("删除成功！");
            this.loadpcworkData(this.pcId)
            ElMessage({
              message: "删除成功！",
              type: "success",
            });
          } else {
            console.log("删除失败！");
            ElMessage({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },

    addworktime() {
      console.log(this.form);
      this.form.pc_uid = this.pcId;
      console.log(this.form);
      this.$http
        .post("http://localhost:8080/workschedule/inserttime", this.form)
        .then((res) => {
          console.log(res.data);
          if (res.data == 1) {
            console.log("添加成功！");
            this.form = {};
            this.dialogFormVisible = false;
            this.loadpcworkData(this.pcId);
            ElMessage({
              message: "添加成功！",
              type: "success",
            });
          } else {
            console.log("添加失败！");
            ElMessage({
              message: "添加失败！",
              type: "warning",
            });
          }
        })
        .catch((err) => {});
    },
    
   
    btnAddDialog() {
      this.dialogFormVisible = true;
    },
  },
};
</script>
  <style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>